<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogPreview.visible"
    :width="1200"
    :title="dialogPreview.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    style="margin-top: 5vh"
    @close="closeDialog"
  >
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-descriptions title="项目信息" :column="3">
          <el-descriptions-item label="项目编号">kooriookami</el-descriptions-item>
          <el-descriptions-item label="项目名称">18100000000</el-descriptions-item>
          <el-descriptions-item label="法人姓名">Suzhou</el-descriptions-item>
          <el-descriptions-item label="法人电话">Suzhou</el-descriptions-item>
          <el-descriptions-item label="计划开工日期">Suzhou</el-descriptions-item>
          <el-descriptions-item label="竣工日期">Suzhou</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col>
        <el-table v-loading="loading" :data="tableList" highlight-current-row border>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column key="name" label="姓名" min-width="90px" align="center" prop="name" />
          <el-table-column key="sex" label="性别" min-width="80px" align="center" prop="sex" />
          <el-table-column key="cardNumber" label="身份证号" min-width="120px" align="center" prop="cardNumber" />
          <el-table-column key="mobile" label="联系电话" min-width="90px" align="center" prop="mobile" />
          <el-table-column key="corpName" label="参建单位" min-width="120px" align="center" prop="corpName" />
          <el-table-column key="groupName" label="所属班组" min-width="90px" align="center" prop="groupName" />
          <el-table-column key="workTypeName" label="工种类型" min-width="90px" align="center" prop="workTypeName" />
          <el-table-column key="address" label="家庭住址" min-width="90px" align="center" prop="address" />
          <el-table-column key="address" label="银行卡号" min-width="90px" align="center" prop="address" />
          <el-table-column key="startDate" label="进场日期" min-width="90px" align="center" prop="startDate" />
          <el-table-column key="endDate" label="离场日期" min-width="90px" align="center" prop="endDate" />
        </el-table>
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageIndex"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery"
        />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts" setup>
import { getProjectGroupMemberList } from "@/api/employee/index";
import { PersonGroupMemberCreateForm } from "@/api/worker/types";
import { ElMessage } from "element-plus";

//声明变量
const props = defineProps({
  dialogPreview: {
    type: Object,
    default: () => ({
      visible: false,
      title: "新增",
      footBtn: "确认新增",
      id: 0,
    }),
  },
  projectInfo: {
    type: Object,
    default: () => ({
      projectName: "",
    }),
  },
});

const { dialogPreview, projectInfo } = toRefs(props);
const queryParams = reactive({
  pageIndex: 1,
  pageSize: 20,
});
const total = ref(0);
const emit = defineEmits(["sendClose"]);
const loading = ref(false);
const tableList = ref<any[]>([]);

watch(
  () => dialogPreview.value.visible,
  () => {
    if (dialogPreview.value.visible) {
      handleQuery();
    }
  }
);
/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean, workerInfo?: any) {
  emit("sendClose", needRefresh, workerInfo);
  tableList.value = [];
}

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  let list = await getProjectGroupMemberList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      total.value = list.data.total;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}
</script>

<style lang="scss" scoped>
:deep(.el-upload__tip) {
  display: inline-block;
  margin-left: 10px;
}
</style>
